<template>
	<view>
		<view class="popup-content">
			<view class="popup-tips">
				建议使用您的微信头像和昵称，以便获得更好的体验
			</view>
			<view class="popup-form">
				<form @submit="handleSubmit">
					<view class="uniFlex">
						<view class="title">头像</view>
						<button class="select-avatar" hover-class="none" open-type="chooseAvatar"
							@chooseavatar="onChooseAvatar">
							<image class="avatar" :src="avatar" v-if="avatar" />
							<div class="select-btn" v-else>
								<u-icon name="plus" :size="30" />
								添加图片
							</div>
						</button>
					</view>
					<view class="uniFlex">
						<view class="title">昵称</view>
						<input style="height: 60rpx;text-align: left;" name="nickname" type="nickname"
							placeholder="请输入昵称" />
					</view>

					<button class="submit-btn" hover-class="other-button-hover" form-type="submit">
						授权头像昵称
					</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCode
	} from "@/utils/login";
	import {
		updateUser
	} from "@/services/AppServices";
	import {
		uploadFile
	} from "@/utils/tools";
	export default {
		name: "mplogin-popup",
		data() {
			return {
				avatar: "",
			};
		},
		methods: {
			async onChooseAvatar(e) {
				const avatarUrl = e.detail.avatarUrl;
				if (!avatarUrl) {
					return;
				}
				uni.showLoading({
					title: "正在上传中...",
					mask: true,
				});
				uploadFile(avatarUrl, {
						header: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
						}
					})
					.then((res) => {
						uni.hideLoading();
						// console.log(res,'1111');	
						this.avatar = res;
					})
					.catch(() => {
						uni.hideLoading();
						uni.showToast({
							title: '上传失败,请重新上传!',
							icon: 'none'
						});
					});

			},
			async handleSubmit(e) {
				const {
					nickname
				} = e.detail.value
				const {
					avatar
				} = this
				if (!avatar) {
					uni.showToast({
						title: '请添加头像',
						icon: 'none'
					})
					return;
				}
				if (!nickname) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
					return;
				}
				uni.showLoading({
					title: "加载中...",
					mask: true,
				});
				let res = await this.$api.updateUser({
					nickname: nickname,
					avatar: this.avatar
				});
				if (res.code == 1) {
					uni.hideLoading();
					// uni.setStorageSync('token', res.data.token);
					uni.showToast({
						title: '操作成功',
					});
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/home/home'
						})
					}, 1000)
				} else {
					uni.hideLoading();
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.popup-content {
		padding: 40rpx 40rpx 80rpx;
		background: #fff;

		.popup-tips {
			color: #999;
			margin-top: 40rpx;
		}

		.popup-form {
			margin-top: 55rpx;

			.uniFlex {
				margin-top: 55rpx;

				.title {
					width: 120rpx;
				}

				.select-avatar {
					width: 120rpx;
					height: 120rpx;
					color: #999;
					padding: 0;
					margin: 0;
					border: none;

					.avatar {
						width: 100%;
						height: 100%;
					}

					.select-btn {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						border: 1px dotted #ccc;
						font-size: 22rpx;
						border-radius: 4rpx;
					}
				}
			}

			.submit-btn {
				height: 82rpx;
				line-height: 82rpx;
				border-radius: 41px;
				color: #fff;
				font-size: 30rpx;
				margin: 80rpx 35rpx 60rpx;
				background: #00A7FF;
			}

		}
	}
</style>